<template>
  <view class="content">
    <view class="searchBox flex">
      <view class="pickerItem flex" style="margin-right: auto;" @tap="schoolShow = true">
        {{schoolName}}
        <u-icon class="icon" name="arrow-down" size="28rpx"></u-icon>
      </view>
      <view class="pickerItem flex" @tap="gradeShow = true">
        {{gradeName}}
        <u-icon class="icon" name="arrow-down" size="28rpx"></u-icon>
      </view>
    </view>
    <view class="iptBox">
      <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data">
      <view class="searchBtn" @tap="getAntiForgettingList()">
        搜索
      </view>
    </view>
    <view class="list">
      <view class="item flex" v-for="(i,k) in list" :key="k">
        <view class="half">
          {{i.username}}
          <text style="color: #00BAAD;margin-left: 10rpx;">(剩余课时:{{i.module_minute}})</text>
        </view>
        <view class="half">
          <text style="color: #D43030;">已消耗课时:{{i.use_hour}}小时</text>
        </view>
        <view class="half" style="width: 100%;">
          <text>购买总课时:{{i.all_hour}}小时</text>
        </view>
        <view class="btn" @tap="navigateToDetail(i.user_id)">
          详情
        </view>
      </view>
    </view>

    <u-picker :show="schoolShow" :columns="schoolList" keyName="school_name" @cancel="schoolShow = false"
      @confirm="schoolConfirm"></u-picker>
    <u-picker :show="gradeShow" :columns="gradeList" @cancel="gradeShow = false" @confirm="gradeConfirm"></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        schoolName: '选择分校',
        gradeName: '选择年级',
        schoolShow: false,
        gradeShow: false,
        info: {
          school_id: '',
          grade: '',
          search_data: ''
        },
        schoolList: [],
        gradeList: [
          ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一', '高二', '高三']
        ],
        list: []
      }
    },
    onLoad() {
      this.getAllSchool()
      this.getUserLogList()
    },
    methods: {
      async getAllSchool() {
        const {
          data: res
        } = await uni.$http.post('school/index/getAllSchool')
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.schoolList.push(res.data)
        console.log(this.schoolList);
      },
      async getUserLogList() {
        const {
          data: res
        } = await uni.$http.post('school/others/getUserLogList', this.info)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.list = res.data
      },
      schoolConfirm(e) {
        this.schoolName = e.value[0].school_name
        this.info.school_id = e.value[0].id
        this.schoolShow = false
      },
      gradeConfirm(e) {
        this.gradeName = e.value[0]
        this.info.grade = e.value[0]
        this.gradeShow = false
      },
      navigateToDetail(id) {
        // 假设要传递的值是一个id
        const itemId = id;
        uni.navigateTo({
          url: `/pages/dataList/courseDetail?id=${itemId}`
        });
      }
    }
  }
</script>

<style lang="scss">
  .content {
    .searchBox {
      width: 704rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .pickerItem {
        width: 310.16rpx;
        height: 66rpx;
        line-height: 66rpx;
        justify-content: center;
        border-radius: 10.51rpx;
        background: #FFFFFF;
        border: 1.75rpx solid #FCF7F7;
        padding: 0 20rpx;
        text-align: center;
        color: #666666;
        font-size: 28rpx;

        .icon {
          width: 20rpx;
          margin-left: 20rpx;
        }
      }
    }

    .iptBox {
      display: flex;
      width: 704rpx;
      margin: 20rpx auto;
      padding: 0 20rpx;

      .ipt {
        box-sizing: border-box;
        width: 520rpx;
        height: 66rpx;
        padding-left: 75rpx;
        border: 2rpx solid #FCF7F7;
        border-radius: 10rpx;
      }

      .iptPla {
        color: #999;
        font-size: 22rpx;
      }

      .searchBtn {
        display: inline-block;
        background: #A6A6A6;
        width: 100rpx;
        height: 66rpx;
        line-height: 66rpx;
        text-align: center;
        border-radius: 10rpx;
        margin-left: 20rpx;
        font-size: 24rpx;
      }
    }

    .list {
      width: 704rpx;
      margin: 0 auto;

      .item {
        height: 162rpx;
        margin-bottom: 20rpx;
        border-bottom: 0.88rpx solid #ECECEC;
        padding: 10rpx 20rpx;
        font-size: 21rpx;
        flex-wrap: wrap;

        .half {
          width: 50%;
        }

        .btn {
          width: 77rpx;
          margin-left: auto;
          text-align: center;
          height: 31rpx;
          line-height: 31rpx;
          border-radius: 8.76rpx;
          background: #ccc;
          color: #666;
        }
      }
    }
  }
</style>